<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script type="text/javascript" src="js/global.js"></script>
    <script src="js/xadmin.js"></script>
</head>
<style>
		/** 箭头未展开 */
		#table1+.treeTable .treeTable-icon .layui-icon-triangle-d:before {
			content: "\e602";
		}

		/** 箭头展开 */
		#table1+.treeTable .treeTable-icon.open .layui-icon-triangle-d:before {
			content: "\e61a";
		}

		/** 文件图标 */
		#table1+.treeTable .treeTable-icon .layui-icon-file:before {
			content: "";
		}

		/** 文件夹未展开（默认有图标我改为空了） */
		#table1+.treeTable .treeTable-icon .layui-icon-layer:before {
			content: "";
		}

		/** 文件夹展开（默认有图标我改为空了） */
		#table1+.treeTable .treeTable-icon.open .layui-icon-layer:before {
			content: "";
		}
	</style>
<body>

	<table id="table1" class="layui-table" lay-filter="table1"></table>


		<!-- 工具条（编辑和删除按钮） -->
		<script type="text/html" id="oper-col">
			<button class="layui-btn layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</button>
			<button class="layui-btn-danger layui-btn layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</button>
		</script>

	</body>
	<script type="text/javascript" src="/static/layui/layui.js"></script>
	<!-- <script type="text/javascript" src="/module/treetable-lay/treetable.js"></script>
	<link rel="stylesheet" href="/module/treetable-lay/treetable.css" /> -->
	<script >
		layui.config({
			base: 'module/' /* 修改为你module文件夹地址*/
		}).extend({
			treetable: 'treetable-lay/treetable'
		}).use(['table', 'treetable'], function() {
			var $ = layui.jquery;
			var table = layui.table;
			var treetable = layui.treetable;

			// 渲染表格
			var renderTable = function() {
				/* layer.load(2); */
				treetable.render({
					size: 'lg', //尺寸     
					treeColIndex: 0, //设置下拉箭头在第几列
					treeSpid: "0", //最上级的父级id
					treeIdName: 'id', //id字段的名称(自己的id)
					treePidName: 'parentid', //pid字段的名称（父亲的id）
					treeDefaultClose: true, //是否默认折叠
					treeLinkage: false, //父级展开时是否自动展开所有子级
					elem: '#table1', //表格的id
					url: '/section/getAllSections', //数据请求地址，返回json格式数据（映射路径）
					page: false,
					cols: [ //列数和列名可根据需要更改
						[{
								field: 'sid',
								width: "40%",
								align: 'left',
								title: '名称'
							}, //filed:json数据的key
							{
								field: 'sname',
								align: 'center',
								title: '上级部门'
							},
							{
								field: 'idx',
								align: 'center',
								title: '排序'
							},
							{
								toolbar: '#oper-col',
								align: 'center',
								title: '操作'
							} //toolbar:工具条的id
						]
					],
					done: function() {
						layer.closeAll('loading');
					}
				});
			};
			renderTable();

			//监听工具条
			table.on('tool(table1)', function(obj) { //注：tool是工具条事件名，table1是table表格的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
					});
				} else if (layEvent === 'edit') { //编辑
					//do something

				}
			});
		});
	</script>
</body>

</html>